<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>常用文本属性_文本对齐_垂直</title>
</head>
<style>
  /*
  顶部:无需任何属性,在垂直方向上,默认就是顶部对齐

  居中:
    对于单行文字:让height=line-height即可
    对于多行文字的居中-----在后面我们用定位去做

  底部:对于单行文字,目前一个临时的方式:
      让line-height=(height*2)-font-size-x    "x"是字体组,动态决定一个值
      其实有更好的方法:后面我们用定位去做
  */
  .one{
    background-color: red;
  }

  .two{
    height: 30px;
    line-height: 30px;
    background-color: gold;
  }
  .three{
    font-size: 20px;
    height: 300px;
    line-height: 580px;
    background-color: aqua;
  }
</style>
<body>
<div class="one">前端1</div>
<div class="two">前端2</div>
<div class="three">前端3</div>

</body>
</html>